<template>
  <div class="index">
    <!--头部  start-->
    <div class="sreePublic">
      <div style="text-align: center;">
        <em class="iconfont" @click="vfun_back">&#xe61f;</em>
      </div>
      支付单
    </div>
    <!--头部  end-->
    <div class="payBill-body">
        <p>1.如果已完成支付，请点击【支付完成】；</p>
        <p>2.如果未打开微信客户端或未完成支付，请点击【重新支付】以选择其他支付方式。</p>
        <div class="payBill-btn">
            <span @click="rePayment_btn">重新支付</span>
            <span @click="paymentCompleted_btn">支付完成</span>
        </div>
    </div>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';  //引入弹框
  import { MessageBox } from 'mint-ui';
  export default {
    name: 'index',
    data () {
      return {

      }
    },
    methods:{
      //重新支付
      rePayment_btn(){

      },

      //支付完成
      paymentCompleted_btn(){

      },

      //返回上个页面
      vfun_back(){
         history.back();
      },
    },
    mounted() {

    }
  }
</script>


<style scoped>

  .payBill-btn span:last-child{
    display: block;
    float: left;
    border: 1px #ec9c2d solid;
    color: #ec9c2d;
    height: 36px;
    line-height: 36px;
    width: 30%;
    text-align: center;
    border-radius: 4px;
    margin-left: 13.3%;
  }

  .payBill-btn span:first-child{
    display: block;
    float: left;
    border: 1px #999999 solid;
    height: 36px;
    line-height: 36px;
    width: 30%;
    text-align: center;
    border-radius: 4px;
    margin-left: 13.3%;
  }

  .payBill-btn{
    margin-top: 50px;
    overflow: hidden;
  }

  .payBill-body p{
    line-height: 30px;
  }

  .payBill-body{
    margin-top: 1.2rem;
    background: white;
    padding: 20px 30px 0;
  }

  *{
    transition: 0.2s;
  }
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }
  .index{
    box-sizing: border-box;
    background: #d2d3d9;
  }
</style>
